<template>
  <div>
    <Detail ref="detail" />
    <ZgDialog :title="'查看'" v-model="visible" :showFooter="false" width="80%" top="5%">
      <div class="comp-info">
        <h3>企业名称</h3>
        <div class="content">
          <div class="comp-info__left">
            <div class="comp-info__row">
              <span class="comp-info__label">企业数量：</span>
              <span class="comp-info__value">28家</span>
              <span class="comp-info__label">级别上升：</span>
              <span class="comp-info__value comp-info__value--blue">2家</span>
              <span class="comp-info__label">综合加分：</span>
              <span class="comp-info__value comp-info__value--blue">1家</span>
            </div>
            <div class="comp-info__row">
              <span class="comp-info__label">执行时间：</span>
              <span class="comp-info__value">2025-06-06 12:30</span>
              <span class="comp-info__label">级别下降：</span>
              <span class="comp-info__value comp-info__value--red">3家</span>
              <span class="comp-info__label">综合减分：</span>
              <span class="comp-info__value comp-info__value--red">1家</span>
            </div>
            <div class="comp-info__row">
              <span class="comp-info__label">状态：</span>
              <span class="comp-info__value">待确认</span>
              <span class="comp-info__label">级别维持：</span>
              <span class="comp-info__value">23家</span>
            </div>
          </div>
          <div class="comp-info__right">
            <div class="comp-info__stat">
              <div class="comp-info__stat-number">1</div>
              <div class="comp-info__stat-label">优质户</div>
            </div>
            <div class="comp-info__stat">
              <div class="comp-info__stat-number">22</div>
              <div class="comp-info__stat-label">市场户</div>
            </div>
            <div class="comp-info__stat">
              <div class="comp-info__stat-number">5</div>
              <div class="comp-info__stat-label">普通户</div>
            </div>
          </div>
        </div>
      </div>
      <div class="comp-info__actions">
        <ZgButton icon="" @click="toExtra(1)" v-if="type === 'detail'">确认</ZgButton>
        <ZgButton icon="" @click="toExtra(2)" v-if="type === 'detail'">作废</ZgButton>
        <ZgButton icon="" @click="toExtra(1)" v-if="type === 'sure'">确认结果更新企业级别</ZgButton>
      </div>
      <ZgNewPage
        ref="page"
        :showInlineBtn="false"
        :uniqueName="uniqueName"
        :pageOpt="pageOpt"
        :dataBtns="dataBtns"
        :headers="headers"
        :adminWidth="100"
        :scrollX="1500"
        :isShowPagination="false"
        @search="onSearch"
        @filter="onFilter"
        @header="mergeHeader"
        @admin="toAdmin"
      >
        <template slot="columns">
          <a-table-column
            v-for="(h, i) in headers"
            :key="`column${i}`"
            :width="h.width === 0 ? 'auto' : h.width"
            align="center"
            :title="h.label"
          >
            <template slot-scope="record">
              {{ record[h.code] }}
            </template>
          </a-table-column>
        </template>
      </ZgNewPage>
    </ZgDialog>
  </div>
</template>
<script>
import Detail from './CompDetail.vue'
export default {
  components: {
    Detail
  },
  data () {
    return {
      visible: false,
      obj: null,
      type: 'detail',
      uniqueName: 'test',
      pageOpt: {
        showPageTitle: false,
        showConditionBtn: true,
        showHeaderConfig: false,
        showAttachBtn: false
      },
      headers: [
        { code: '1', label: '企业名称', isShow: true, sort: 0, width: 240 },
        { code: '2', label: '综合加分', isShow: true, sort: 0 },
        { code: '3', label: '综合减分', isShow: true, sort: 0 },
        { code: '4', label: '分组1名称', isShow: true, sort: 0 },
        { code: '5', label: '分组2名称', isShow: true, sort: 0 },
        { code: '6', label: '分组3名称', isShow: true, sort: 0 },
        { code: '7', label: '分数', isShow: true, sort: 0 },
        { code: '8', label: '当前级别', isShow: true, sort: 0 },
        { code: '9', label: '评估级别', isShow: true, sort: 0 },
        { code: '10', label: '级别变更', isShow: true, sort: 0 },
        { code: '11', label: '黑白名单', isShow: true, sort: 0 },
        { code: '12', label: '状态', isShow: true, sort: 0 }
      ],
      dataBtns: []
    }
  },
  methods: {
    open (type, json) {
      this.obj = Object.assign({}, this.obj, json || {})
      this.type = type
      if (type === 'detail') {
        this.dataBtns = [
          {
            key: 1,
            name: '查看',
            type: 'link',
            isShow: () => {
              return true
            }
          }
        ]
      } else {
        this.dataBtns = [
          {
            key: 2,
            name: '修改',
            type: 'link',
            isShow: () => {
              return true
            }
          }
        ]
      }
      this.visible = true
    },
    search () {
      const pageRef = this.$refs.page
      if (pageRef) {
        pageRef.search()
      } else {
        setTimeout(() => {
          this.search()
        }, 50)
      }
    },
    onSearch (param) {
      const diyHeaders = localStorage.getItem(this.currentUser.username + '_diyHeader_' + this.uniqueName)
      if (diyHeaders) {
        this.mergeHeader(JSON.parse(diyHeaders))
      }
      // 加载表头
      const list = [
        {
          key: '1',
          id: '1',
          1: '山西长覃美娇煤炭销售有限公司',
          2: '10.0',
          3: '30.0',
          4: '30.0',
          5: '30.0',
          6: '90.0',
          7: '90.0',
          8: '优质户',
          9: '市场户',
          10: '下降',
          11: '否',
          12: '原始'
        }
      ]
      this.$refs.page.endSearch({
        total: list.length,
        list: list
      })
    },
    toAdmin (opt) {
      if (opt.key === 1) {
        this.$refs.detail.open()
      } else {
        alert('修改操作，原型画的是表格，应该是表单吧？')
      }
    },
    toExtra (opt) {
      if (opt === 1) {
        this.confirm(() => {}, '确定要确认这条数据么')
      } else {
        this.confirm(() => {}, '确定要作废这条数据么')
      }
    },
    onFilter (f, param) {},
    mergeHeader (newHeaders) {
      if (!newHeaders) {
        return
      }
      this.headers = newHeaders
        .filter((t) => {
          return t.isShow
        })
        .sort((a, b) => {
          return a.sort - b.sort
        })
    },
    onAdd () {
      const arr = this.fileList.filter((t) => {
        return t.path && t.path.length > 0
      })
      if (arr.length === 0) {
        this.$error({ title: '请上传文件' })
        return
      }
      this.$emit('ok')
      // const param = arr.map(t => {
      //     return {
      //     code: this.currAttType,
      //     fileName: t.name,
      //     fileSize: t.size,
      //     filePath: t.path,
      //     tableName: this.tableName,
      //     tableId: this.dataId
      //     }
      // })
      // this.$http.post('/zg-system/attach/add', param, () => {
      //     this.showAdd = false
      //     this.$refs.page.search()
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.comp-info {
  h3 {
    font-size: 18px;
    color: #333;
    font-weight: 700;
  }
  .content {
    background: #f8fcff;
    border-radius: 8px;
    padding: 32px 24px 24px 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    min-height: 120px;
    border: none;
  }
}

.comp-info__left {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.comp-info__row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.comp-info__label {
  color: #666;
  margin-right: 8px;
  min-width: 72px;
  display: inline-block;
}

.comp-info__value {
  color: #222;
  margin-right: 24px;
  min-width: 110px;
}

.comp-info__value--blue {
  color: #1890ff;
}

.comp-info__value--red {
  color: #ff4d4f;
}

.comp-info__right {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-left: 40px;
}

.comp-info__stat {
  text-align: center;
}

.comp-info__stat-number {
  font-size: 40px;
  font-weight: 600;
  color: #444;
  line-height: 1;
}

.comp-info__stat-label {
  font-size: 16px;
  color: #888;
  margin-top: 4px;
}

.comp-info__actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 24px;
}

.comp-info__btn {
  min-width: 80px;
  padding: 8px 24px;
  border-radius: 4px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.comp-info__btn--primary {
  background: #1890ff;
  color: #fff;
}

.comp-info__btn--secondary {
  background: #fff;
  color: #1890ff;
}
</style>
